<template>
  <view class="category-page">
    <view class="category-header">
      <text class="title">商品分类</text>
    </view>
    <view class="category-list">
      <!-- 分类列表将通过数据渲染 -->
      <view class="category-item" v-for="category in categories" :key="category.id">
        <image :src="category.icon" class="category-icon"></image>
        <text class="category-name">{{ category.name }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';

export default defineComponent({
  setup() {
    // 模拟分类数据
    const categories = ref([
      { id: 1, name: '手机数码', icon: '/static/icons/phone.png' },
      { id: 2, name: '家用电器', icon: '/static/icons/electric.png' },
      { id: 3, name: '服装鞋帽', icon: '/static/icons/clothes.png' },
      { id: 4, name: '美妆个护', icon: '/static/icons/cosmetics.png' },
      { id: 5, name: '食品饮料', icon: '/static/icons/food.png' },
      { id: 6, name: '家居生活', icon: '/static/icons/home.png' },
    ]);

    return {
      categories
    };
  }
});
</script>

<style scoped>
.category-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.category-header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
}

.category-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.category-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.category-name {
  font-size: 24rpx;
  color: #666;
}
</style>